<template>
	<div>
		<div v-if="unselected">
		<div class="graybg"></div>
		<!--头部-->
		<header id="header">
			<div class="header header_bg clearfix">
				<div class="header_left pull-left">
					<i class="icon iconfont icon-xia baiColor" onclick="javascript:history.back(-1)">&#xe612;</i>
					<span class="baiColor">账户提现</span>
				</div>
			</div>
		</header>
		<!--==-->
		<div class="main">
			<div class="bankcard marginAuto">
				<div class="bankcard_main marginAuto clearfix" @click="change" v-if="bankshow">
					<h5 class="iconfont pull-left">
						<img :src="img" alt="logo"/>
					</h5>
					<div class="bankcard_text pull-left">
						<h4 v-text="showname"></h4>
						<p>尾号{{tail}}</p>
					</div>
					<h6 class=" iconfont pull-right">&#xe615;</h6>
				</div>
			</div>
		</div>
		<!--==-->
		<div class="money marginAuto">
			<div class="money_main marginAuto">
				<span>金额</span>
				<input type="number" value="" placeholder="请输入金额" v-model="moneynum"/>
			</div>
		</div>
		<div class="footer_button button baiColor" @click="enter">
			<span>提现</span>
		</div>
		</div>
		<my-card v-if="unselected == true ? false : true" @myevent="getmycard"></my-card>
	</div>
</template>

<script>
	import myCard from './myCard.vue';
	export default{
		components:{myCard},
		data(){
			return{
				money:"",	//用户余额
				moneynum:"",	//	金额
				bankshow:false,
				//银行卡部分
				img:"",//银行logo
				tail:"",		//银行卡号 只取后四位
				showname:"",	//卡名称
				bank_id:"",	//默认银行卡id
				
				unselected:true, //控制我的银行卡页面
			}
		},
		mounted(){
			//银行卡信息
			let _this = this;
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);
			params.append('type',1);
			this.$axios({
			   url:"Home/User/MyBankcard",
				method:"post",
				data:params
			   }).then(function(res){
			   	if(res.data.code == 2){
			   		alert("您还没有银行卡，请添加您的银行卡")	
			   	}else{
			   		_this.bankshow = true;
			   		var datas = res.data;
				   	_this.bank_id = datas.data.b_id
				   	_this.img = datas.data.b_bankimg;
				   	_this.tail = datas.data.b_bankcard;
				   	_this.showname= datas.data.b_bankname;
				   	//			银行卡获取后四位
					_this.end();
			   	}
			   
			}).catch(function(err){
				console.log(err)		
			});
			
//			账户余额
			var arr = ['u_money'];
			params.append('arr',arr);
			this.$axios({
			   url:"Home/Config/getUserField",
				method:"post",
				data:params
			   }).then(function(res){
			   	_this.money = res.data.data.u_money;
			}).catch(function(err){
				console.log(err)		
			})	
		},
		methods:{
			//更换银行卡部分
			change(){
				this.unselected = false;
				this.moneynum = "";
			},
			getmycard(data){
//				改变后后台发往后台
				this.unselected = data.isShow;
				this.bank_id = data.bank_id;
//				改变后渲染前台
				this.img = data.img;
				this.tail = data.tail;
				this.showname = data.showname;
			},
			//提现
			enter(){
				var _this = this;
				var moneynum = _this.moneynum;
				if(moneynum == ""){
					alert("请输入你要提现的金额");
				}else if(moneynum>_this.money){
					alert("提现金额不得大于总金额");
				}else if (moneynum < 99){
					alert("提现金额不得少于100元")
				}else{
					var info = window.localStorage.data;
					var params = new URLSearchParams();
					params.append('token', info);	//客户秘钥（信息）
					params.append('price',moneynum);
					params.append('type',1);
					var bankid = _this.bank_id;
					if(bankid == ""){
						alert("您还没有绑定银行卡");
					}else{
						params.append('bank_id',bankid);
						this.$axios({
						   url:"Home/Money/money_zhuan",
							method:"post",
							data:params
						  }).then(function(res){
						  	console.log(res.data)
							if(res.data.code == 1){
						   		alert("提现成功，系统正在处理请稍等...");
						   		_this.$router.push("wShares");
						   	}else{
						   		alert("提现失败")
						   	}		
						}).catch(function(err){
							console.log(err)		
						})
					}
					
				}
			},
			//卡号后四位
			end(){
				var tails = this.tail;
				if(tails.length > 4) {
					this.tail = tails.substr(tails.length-4);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	.header_left{
		width: 100px;
	}
	.header_left i{
		font-size: 20px;
	}
	.header_left span{
		font-size: 16px;
	}
	.main{
		padding-top: 40px;
	}
	/*=银行卡=*/
	.bankcard{
		margin-top: 10px;
		width: 90%;
		background: #fff;
	}
	.bankcard_main{
		width: 95%;
		height: 50px;
		padding: 10px 0;
	}
	.bankcard_main h5{
		width: 50px;
		height: 50px;
		margin-right: 8px;
		line-height: 50px;
	}
	.bankcard_main h5 img{
		width: 100%;
		height:100%;
	}
	.bankcard_text h4{
		color:#333333 ;
		line-height: 20px;
		font-size: 14px;
		margin-bottom: 14px;
	}
	.bankcard_text p{
		color:#999;
		line-height: 20px;
		font-size: 12px;
	}
	.bankcard_main h6{
		font-size: 20px;
		line-height: 50px;
		color: #999;
	}
	/*=结束=*/
	.money{
		width: 90%;
		margin-top: 10px;
		background: #fff;
	}
	.money_main{
		width: 95%;
		height: 40px;
		line-height: 38px;
	}
	.money_main input{
		width: 70%;
		height: 38px;
		font-size: 16px;
		color: #333;
		padding-left: 10px;
		line-height: 36px;
	}
	.footer_button{
		background:#F3961F;
		line-height: 30px;
		margin-top: 50px;
		font-size: 18px;
	}
</style>